<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>营业信息</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <meta name="format-detection" content="telephone=yes">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="/css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="images/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <!-- JavaScript files-->
    <!-- laydate-->
    <script src="/vendor/laydate/laydate.js"></script>

    <script src="/vendor/jquery/jquery.min.js"></script>
    <script src="/vendor/popper.js/umd/popper.min.js"></script>
    <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="/vendor/jquery.cookie/jquery.cookie.js"></script>
    <script src="/vendor/chart.js/Chart.min.js"></script>
    <script src="/vendor/jquery-validation/jquery.validate.min.js"></script>
    <script src="/js/charts-home.js"></script>

    <!-- Main File-->
    <script src="/js/front.js"></script>

    <!-- 公共header js -->
    <script th:include="commons::header_js"> </script>
</head>
<body>
<div class="page">
    <!-- Main Navbar-->
    <header th:include="commons::common_header"></header>

    <div class="page-content d-flex align-items-stretch">
        <!-- 在commons里面，sidebar -->
        <nav th:include="commons::common_sidebar" class="side-navbar"></nav>

        <div class="content-inner">
            <!-- Page Header-->
            <header class="page-header">
                <div class="container-fluid">
                    <h2 class="no-margin-bottom">营业信息</h2>
                </div>
            </header>
            <!-- 个人操作区域 -->
            <!-- ......... -->
            <!-- 选项卡-->
            <section class="no-padding-bottom">
                <div class="container-fluid">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="todayChartBtn" data-toggle="tab" href="#today_chart">每日信息</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="totalChartBtn" data-toggle="tab" href="#total_chart">总营业额</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="roomChartBtn" data-toggle="tab" href="#room_chart">房间销量</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="peopleChartBtn" data-toggle="tab" href="#people_chart">用户比例</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="orderListBtn" data-toggle="tab" href="#order_list">查询订单</a>
                        </li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div id="today_chart" class="container tab-pane active"><br>
                            <a class="btn btn-outline-primary" id="changeDayBtn">选择日期</a>
                            <input type="hidden" id="today">
                            <br><br>
                            <div class="chart col-lg-8 col-12" style="float:left;">
                                <!--                                <div class="pie-chart bg-white align-items-center justify-content-center has-shadow">-->
                                <!--                                    <div class="title"><strong class="text-violet" id="today_time"></strong><strong class="text-violet">房间信息</strong><small>(间)</small><br></div>-->
                                <!--                                    <canvas id="todayPieChart"></canvas>-->
                                <!--                                </div>-->
                                <div class="card-header d-flex align-items-center">
                                    <strong class="text-violet today_time"></strong><strong class="text-violet">房间信息</strong><small>(间)</small>
                                </div>
                                <div class="card-body bg-white">
                                    <canvas id="todayBarChart"></canvas>
                                </div>
                            </div>
                            <!-- Client Profile -->
                            <div class="col-lg-4" style="float: left">
                                <div class="client card">
                                    <div class="card-header">
                                        <strong class="text-violet today_time"></strong><strong class="text-violet">值班人员</strong>
                                    </div>
                                    <div class="card-body text-center">
                                        <div class="client-avatar">
                                            <img id="head_image" src="" alt="..." class="img-fluid rounded-circle">
                                        </div>
                                        <div class="client-title">
                                            <h3 id="worker_name"></h3><a href="" id="connect_phone">联系</a>
                                        </div>
                                        <div class="client-info">
                                            <div class="row">
                                                <div class="col-6"><strong id="start_work"></strong><br><small>上班时间</small></div>
                                                <div class="col-6"><strong id="out_work"></strong><br><small>下班时间</small></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-12" style="float:left;">
                                <!-- Numbers-->
                                <div class="statistic d-flex align-items-center bg-white has-shadow">
                                    <div class="icon bg-green"><i class="fa fa-bank"></i></div>
                                    <div class="text"><strong id="today_money"></strong><br><small class="today_time"></small><small>收入</small></div>
                                </div>
                            </div>
                            <div class="card col-lg-12 col-12" style="position: relative;top: 30px;">
                                <div class="card-header">
                                    <strong class="text-violet today_time"></strong><strong class="text-violet">住房信息</strong>
                                </div>
                                <div class="card-body">
                                    <table class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th>房间号</th>
                                            <th>姓名</th>
                                            <th>身份证号</th>
                                            <th>入住时间</th>
                                            <th>退房时间</th>
                                            <th>房间类型</th>
                                        </tr>
                                        </thead>
                                        <tbody id="todayCheckInInfoContext">

                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                        <div id="total_chart" class="container tab-pane fade"><br>
                            <a class="btn btn-outline-primary" id="changeMoneyYearBtn">选择日期</a>
                            <input type="hidden" id="moneyYear">
                            <br><br>
                            <!-- bar Chart            -->
                            <div class="chart col-lg-8 col-12" style="float:left;">
                                <!--  营业额条形图表-->
                                <div class="card-header d-flex align-items-center">
                                    <strong class="text-violet" id="bar_year"></strong><strong class="text-violet">每月营业额</strong><small>(元)</small>                                </div>
                                <div class="card-body bg-white">
                                    <canvas id="moneyLineChart"></canvas>
                                </div>
                            </div>

                            <div class="chart col-lg-4 col-12" style="float:left;">
                                <!-- Numbers-->
                                <div class="statistic d-flex align-items-center bg-white has-shadow">
                                    <div class="icon bg-green"><i class="fa fa-bank"></i></div>
                                    <div class="text"><strong id="total_price"></strong><br><small>this year total money</small></div>
                                </div>
                                <!-- 近五年营业额-->
<!--                                <div class="bar-chart has-shadow bg-white">-->
<!--                                    <div class="title"><strong-->
<!--                                            class="text-violet">近五年营业额</strong><small>(百万元)</small><br></div>-->
<!--                                    <canvas id="allYearMoneyChart"></canvas>-->
<!--                                </div>-->
<!--                                <div class="card-header d-flex align-items-center">-->
<!--                                    <strong class="text-violet">近五年营业额</strong><small>(百万元)</small>                                </div>-->
<!--                                <div class="card-body bg-white">-->
<!--                                    <canvas id="allYearMoneyChart"></canvas>-->
<!--                                </div>-->
                            </div>
                        </div>
                        <div id="room_chart" class="container tab-pane fade"><br>
                            <a class="btn btn-outline-primary" id="changeRoomTimeBtn">选择日期</a>
                            <input type="hidden" id="roomTimeBtn">
                            <br><br>
                            <!-- bar Chart            -->
<!--                            <div class="chart col-lg-8 col-12" style="float:left;">-->
<!--                                <div class="pie-chart bg-white align-items-center justify-content-center has-shadow">-->
<!--                                        <div class="title"><strong class="text-violet" id="pie_month"></strong><strong class="text-violet">房间销量</strong><small>(间)</small><br></div>-->
<!--                                        <canvas id="roomPieChart"></canvas>-->
<!--                                </div>-->
<!--                            </div>-->
                            <div class="chart col-lg-8 col-12" style="float:left;">
                                <div class="card-header d-flex align-items-center">
                                    <strong class="text-violet" id="pie_month"></strong><strong class="text-violet">房间销量</strong><small>(间)</small>                            </div>
                                <div class="card-body bg-white">
                                    <canvas id="roomPieChart"></canvas>
                                </div>
                            </div>
                            <div class="chart col-lg-4 col-12" style="float:left;">
                                <!-- Numbers-->
                                <div class="statistic d-flex align-items-center bg-white has-shadow">
                                    <div class="icon bg-green"><i class="fa fa-hotel"></i></div>
                                    <div class="text"><strong id="total_rooms"></strong><br><small>this month total rooms</small></div>
                                </div>
<!--                                &lt;!&ndash; Numbers&ndash;&gt;-->
<!--                                <div class="statistic d-flex align-items-center bg-white has-shadow">-->
<!--                                    <div class="icon bg-green"><i class="fa fa-home"></i></div>-->
<!--                                    <div class="text"><strong>65</strong><br><small>This month rooms</small></div>-->
<!--                                </div>-->
                            </div>
                        </div>
                        <div id="people_chart" class="container tab-pane fade"><br>
                            <!-- bar Chart            -->
                            <div class="chart col-lg-8 col-12" style="float:left;">
                                <!--  营业额条形图表-->
<!--                                <div class="bar-chart bg-white align-items-center justify-content-center has-shadow">-->
<!--                                    <div class="title">-->
<!--                                        <strong class="text-violet">用户比例</strong><small>(人)</small><br>-->
<!--                                    </div>-->
<!--                                    <canvas id="userPieChart"></canvas>-->
<!--                                </div>-->
                                <div class="card-header d-flex align-items-center">
                                    <strong class="text-violet">用户比例</strong><small>(人)</small>                       </div>
                                <div class="card-body bg-white">
                                    <canvas id="userPieChart"></canvas>
                                </div>
                            </div>
                            <div class="chart col-lg-4 col-12" style="float:left;">
                                <!-- Numbers-->
                                <div class="statistic d-flex align-items-center bg-white has-shadow">
                                    <div class="icon bg-green"><i class="fa fa-male"></i></div>
                                    <div class="text"><strong id="user_count"></strong><br><small>total users</small></div>
                                </div>
                            </div>
                        </div>
                        <div id="order_list" class="container tab-pane fade"><br>
                            <div class="input-group col-lg-4 col-6" style="float: right">

                                <div class="input-group-prepend">
                                    <button id="searchKeyWord" style="width: 100px;" type="button" class="btn btn-outline-primary dropdown-toggle text-primary" data-toggle="dropdown">
                                        关键字
                                    </button>
                                    <div class="dropdown-menu">
                                        <a id="nameKeyWord" class="dropdown-item" href="javascript:void(0)" >姓名</a>
                                        <a id="idCardKeyWord" class="dropdown-item" href="javascript:void(0)" >身份证号</a>
                                        <a id="roomNumKeyWord" class="dropdown-item" href="javascript:void(0)" >房间号</a>
                                    </div>
                                    <input id="searchContext" type="text" class="input-group" style="border:1px mediumslateblue solid;width: 200px;" >
                                    <a id="searchBtn" class="btn btn-outline-primary" href="javascript:void(0)">搜索</a>
                                </div>
                            </div>
                            <br>
                            <div class="col-lg-12 col-12">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>房间号</th>
                                        <th>姓名</th>
                                        <th>身份证号</th>
                                        <th>入住时间</th>
                                        <th>退房时间</th>
                                        <th>房间类型</th>
                                    </tr>
                                    </thead>
                                    <tbody id="checkInInfoContext">

                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </section>

            <!-- model -->
            <div class="modal fade" id="new_reservations_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" th:include="commons::reservation_modal">

            </div><!--        &lt;!&ndash; Page Footer&ndash;&gt;-->
<!--        <footer class="main-footer">-->
<!--            <div class="container-fluid">-->
<!--                <div class="row">-->
<!--                    <div class="col-sm-6">-->
<!--                        <p>Copyright &copy; 2019.Company GAMBLER.</p>-->
<!--                    </div>-->
<!--                    <div class="col-sm-6 text-right">-->
<!--                        <p></p>-->
<!--                        &lt;!&ndash; Please do not remove the backlink to us unless you support further theme's development at https://bootstrapious.com/donate. It is part of the license conditions. Thank you for understanding :)&ndash;&gt;-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </footer>-->
    </div>
</div>

</div>
</body>
</html>